<style>
    table>tbody>tr>th:nth-child(1),table>tbody>tr>th:nth-child(3) {
        width: 15%;
        text-align: center;
        vertical-align: middle;
    }

    table>tbody>tr>th:nth-child(2),table>tbody>tr>th:nth-child(4) {
        width: 35%;
        text-align: left;
        vertical-align: middle;
    }

</style>

<div class="modal fade" id="getIPSegment" tabindex="-1" role="dialog"
     aria-labelledby="getIPSegmentLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="getIPSegmentLabel">
                    详情
                </h4>
            </div>
            <div class="modal-body">
                <form>
                    <input type="text" id="getId" style="display: none;">
                    <table id="example1" class="table table-bordered">
                        <tbody>
                            <tr>
                                <th>IP网段</th>
                                <th>
                                    <div>
                                        <p class="form-control-static" id="getSegment"></p>
                                    </div>
                                </th>
                                <th>IP环境</th>
                                <th>
                                    <div>
                                        <p class="form-control-static" id="getIP_environment"></p>
                                    </div>
                                </th>
                            </tr>
                            <tr>
                                <th>备注</th>
                                <th colspan="3">
                                    <textarea class="form-control" id="getIP_description" rows="4" disabled></textarea>
                                </th>
                            </tr>
                            <tr>
                                <th>无效IP</th>
                                <th colspan="3">
                                    <div>
                                        <label for="getInvalidIP">合计0个</label>
                                        <select multiple="" class="form-control" id="getInvalidIP">
                                        </select>
                                    </div>
                                </th>
                            </tr>
                            <tr>
                                <th>空闲IP</th>
                                <th>
                                    <div>
                                      <label for="getIdleIP">合计0个</label>
                                      <select multiple="" class="form-control" id="getIdleIP">
                                      </select>
                                    </div>
                                </th>
                                <th>占用IP</th>
                                <th>
                                    <div>
                                      <label for="getUsedIP">合计0个</label>
                                      <select multiple="" class="form-control" id="getUsedIP">
                                      </select>
                                    </div>
                                </th>
                            </tr>
                        </tbody>
                    </table>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script>
    function viewIPSegmentModal(ele){
        var id = $(ele).attr('data-id')
        $.ajax({
            url: '/api/ipsegment/'+id+'/',
            type: 'GET',
            success: function (res) {
                $('#getId').val(id)
                $('#getSegment').text(res.segment)
                var environment = {}
                {% for evironment in IP_environment_ %}
                    environment[{{ evironment.0 }}]='{{ evironment.1 }}'
                {% endfor %}
                $("#getIP_environment").text(environment[res.IP_environment])
                $('#getIP_description').text(res.IP_description)
                viewIPSegmentInfo(res)
            },
            error: function (res) {
                $.alert({
                    title: 'Tips',
                    type: 'red',
                    content: '获取失败！',
                })
            }
        })
    }

    function viewIPSegmentInfo(res){
        var category = res.IP_category
        var invalid = res.invalid_IP
        $('#getIdleIP option').remove()
        $('#getUsedIP option').remove()
        $('#getInvalidIP option').remove()
        $('label[for="getIdleIP"]').text()
        $('label[for="getUsedIP"]').text()
        for(item of category.idle.items){
            $('label[for="getIdleIP"]').text('合计'+category.idle.count+'个')
            $('#getIdleIP').append('<option>'+item.IP+'</option>')
        }
        for(item of category.used.items){
            $('label[for="getIdleIP"]').text('合计'+category.used.count+'个')
            $('#getUsedIP').append('<option>'+item.IP+'</option>')
        }
        for(item of invalid.items){
            $('label[for="getInvalidIP"]').text('合计'+invalid.count+'个')
            $('#getInvalidIP').append('<option>'+item.IP+'</option>')
        }
    }

</script>